<script setup lang="ts">
const {type='default', size="middle"} = defineProps<{
  type?: 'default' | 'primary' | 'plain' | 'gray',
  size?: 'large' | 'middle' | 'small' | 'mini'
}>()
</script>
<template>
 <!-- <button class="xtx-button ellipsis" :class="[type, size]"> -->
 <button class="xtx-button ellipsis" :class="[type, size]">
    <slot />
  </button>
</template>



<style scoped lang="less">
.xtx-button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}
.middle { width: 180px;height: 50px;font-size: 16px;
}
.small {width: 100px;height: 32px;}
.mini {width: 60px;height: 32px;}

// 样式风格
.default { border-color: #e4e4e4; color: #666;}
.primary {border-color: @xtxColor;background: @xtxColor;color: #fff;}
.plain {
  border-color: @xtxColor;
  color: @xtxColor;
  background: lighten(@xtxColor, 50%);
}
.gray {
  border-color: #ccc;
  background: #ccc;
  color: #fff;
}
</style>